<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/css/layui.css}">
</head>
<body>

<blockquote class="layui-elem-quote news_search">
    <form class="layui-form">
        <div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" id="nickname" value="" placeholder="请输入昵称"
                           class="layui-input search_input">
                </div>
                <div class="layui-input-inline layui-form">
                    <select name="sex" class="" id="sex">
                        <option value="-1">请选择性别</option>
                        <option value="1">男</option>
                        <option value="0">女</option>
                        <option value="2">保密</option>
                    </select>
                </div>
                <div class="layui-input-inline layui-form">
                    <select name="status" class="" id="status">
                        <option value="-1">请选择账户状态</option>
                        <option value="0">未激活</option>
                        <option value="1">正常</option>
                        <option value="2">禁用</option>
                    </select>
                </div>
            </div>
        </div>
        <div style="margin-top: 1%">
            <div class="layui-inline">
                <input type="text" id="createTimeStart"
                       class="layui-input userName" name="createTimeStart"
                       placeholder="注册时间(开始)" value="">
            </div>
            <div class="layui-inline">
                <input type="text" id="createTimeEnd" class="layui-input userName"
                       name="createTimeEnd" placeholder="注册时间(结束)" value="">
            </div>
            <a class="layui-btn search_btn" lay-submit="" data-type="search"
               lay-filter="search">查询</a>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-normal userAdd_btn">添加用户</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-danger batchDel">批量删除</a>
            </div>
            <div class="layui-inline">（支持模糊查询）</div>
        </div>
    </form>
</blockquote>

    <table id="users" lay-filter="test"></table>

<script type="text/html" id="barEdit">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


    <script th:src="@{/static/layui.js}"></script>
    <script>
        //layui基于组件(模块)开发的     ctrl+shift+f9  工具中重构代码
        layui.use(['table','laydate','jquery','layer'],function () {
            var table = layui.table;
            var laydate = layui.laydate;
            var $ = layui.jquery;
            var layer = layui.layer;
            table.render({
                elem:'#users',
                url:'/user/list',
                width:1200,
                page:true,
                limit:5,
                limits:[5,10,15],
                cols:[
                    [
                        {field:'uid',type:'checkbox'},
                        {field:'email',title:'邮箱',width:80},
                        {field:'nickname',title:'昵称',width:80},
                        {field:'sex',title:'性别',width:80,templet:'#sexTel'},
                        {field:'birthday',title:'出生日期',width:200},
                        {field:'address',title:'地址',width:80},
                        {field:'phone',title:'手机',width:80},
                        {field:'status',title:'状态',width:80,templet:'#statusTel'},
                        {field:'createTime',title:'注册日期',width:200},
                        {title:'操作',width:180,templet:'#barEdit'}
                    ]
                ],
                parseData:function (res) {
                    return {
                        "code":res.code==200?0:res.code,
                        "msg":res.message,
                        "count":res.data.total,
                        "data":res.data.list
                    }
                }
            })

            //日期控件
            var start = laydate.render({
                elem:'#createTimeStart',
                max:'new Date()',
                done:function (value,date) {
                    end.config.min = date
                    end.config.min.month = date.month-1;  //js  ==> var d  =new Date(); alert( d.getMonth()); 0-11
                }
            });

            var end = laydate.render({
                elem:'#createTimeEnd',
                max: 'new Date()',
                done:function (value,date) {
                    start.config.max = date;
                    start.config.max.month = date.month-1;
                }
            })
            //搜索
            $(".search_btn").click(function () {
                table.reload('users', {
                    url: '/user/list'
                    ,where: {
                        nickName: $("#nickname").val(),
                        sex:$("#sex").val(),
                        status:$("#status").val(),
                        begin:$("#createTimeStart").val(),
                        end:$("#createTimeEnd").val()
                    } //设定异步数据接口的额外参数

                });
            })
            //批量删除

            $(".batchDel").click(function () {
                var checkStatus = table.checkStatus("users");
                //alert(checkStatus.data.length);
                var data = checkStatus.data;
                if(data.length == 0){
                    layer.msg("请选择数据",{icon:5,time:1000});
                    return ;
                }
                var keys = "";
                $.each(data,function (index,obj) {
                    keys += obj.uid+",";
                })
                keys = keys.substring(0,keys.length-1);
                layer.confirm('确认删除？',function (index) {
                    $.ajax({
                        url:'/user/deleteUser/'+keys,
                        type:'delete',
                        dataType:'json',
                        success:function (res) {
                            if(res.code == 200){
                                layer.msg('删除成功',{icon:1});
                                location.reload();
                            }else{
                                layer.msg('删除失败',{icon:5});
                            }
                        }
                    })
                    layer.close(userList);
                })

            })

            //添加
            $(".userAdd_btn").click(function () {
                var index = layer.open({
                    type:2,
                    title:'添加用户',
                    content:'/user/addUser'
                });
                $(window).resize(function () {//窗口改变大小触发的事件
                    layer.full(index);
                })
                layer.full(index);
            })
            
            table.on('tool(test)',function (obj) {
                var data = obj.data;//行数据
                var event = obj.event;
                if(event === 'edit'){
                    layer.open({
                        type:2,
                        title:'编辑用户',
                        area:['500px','500px'],
                        content:'/user/userEdit/'+data.uid
                    });
                }else if(event === 'del'){
                    layer.confirm('确认删除？',function (index) {
                        $.ajax({
                            url:'/user/delete/'+data.uid,
                            type:'delete',
                            dataType:'json',
                            success:function (res) {
                                if(res.code == 200){
                                    layer.msg('删除成功',{icon:1},function () {
                                        location.reload();
                                    })
                                }else{
                                    layer.msg('删除失败',{icon:5})
                                }
                            }
                        })

                        layer.close(userList);
                    })
                }
            })

        })
    </script>

    <script type="text/html" id="sexTel">
        {{# if(d.sex === '0'){ }}
                <span>女</span>
        {{# }else if(d.sex==='1'){ }}
            <span>男</span>
        {{# }else{ }}
            <span>保密</span>
        {{# } }}
    </script>
    <script type="text/html" id="statusTel">
        {{# if(d.status === '0'){ }}
            <span>未激活</span>
        {{# }else if(d.status==='1'){ }}
            <span>正常</span>
        {{# }else{ }}
            <span>禁用</span>
        {{# } }}
    </script>

</body>
</html>